<template>
  <div style="margin: 20px;">
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-table
      border
      :virtual="true" 
      :virtualConfig="virtualConfig"
      height="570"
      :data="tableData"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      style="width: 100%">
      <el-table-column
        >
      </el-table-column>
      <el-table-column
        type="index"
        fixed
        >
      </el-table-column>
      <el-table-column
        fixed
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="address"
        fixed
        width="280"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="name"
        fixed="right"
        label="姓名"
        width="180px">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        fixed="right"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        width="300"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="address"
        width="300"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="address"
        width="300"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="address"
        width="300"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="address"
        width="300"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="address"
        width="300"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input: 'Hello Element UI!',
        tableData: [],
        virtualConfig:{
          height: 48,
          debounce: 0,
        }
      };
    },
    created(){
      this.tableData = [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
      // setTimeout(() => {
      //   this.tableData.push(...new Array(100).fill({
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄'
      //   }))
      // },2000)
      
      // setTimeout(() => {
      //   this.tableData = []
      //   this.tableData.push(...new Array(20).fill({
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄'
      //   }).map((item,index) => {
      //     return {
      //       ...item,
      //       name: item.name + index
      //     }
      //   }))
      // },4000)
    }
  };
</script>
